<template>
  <div class="app-container">
    <Title
      :show-btn="false"
      :is-show-back="false"
      name="申码用户管理"
      type="primary"
      icon-class="el-icon-plus"
    />
    <!-- 暂时留着，UI图没出，不知道要不要 -->
    <el-form :model="searchData" ref="queryForm" :inline="true">
      <el-form-item label="关键字" prop="userName">
        <el-input
          v-model="searchData.userName"
          placeholder="请输入姓名、手机号、证件号"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="手机号" prop="categoryName">
        <el-input
          v-model="searchData.categoryName"
          placeholder="请输入手机号"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="证件号" prop="categoryName">
        <el-input
          v-model="searchData.categoryName"
          placeholder="请输入证件号"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="状态">
        <el-select v-model="searchData.deleteFlag" placeholder="请选择">
          <el-option label="全部" :value="''" />
          <el-option label="正常" value="0" />
          <el-option label="禁用" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="申请应用">
        <el-select v-model="searchData.applicationName" placeholder="请选择">
          <el-option
            v-for="(item, index) in appList"
            :key="index"
            :label="item.applicationName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="userList"
    >
      <el-table-column label="序号" type="index" width="50"> </el-table-column>
      <el-table-column label="姓名" width="90">
        <template slot-scope="scope">
          <el-button @click="userInfo(scope.row)" type="text">{{
            formatName(scope.row.username)
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="手机号">
        <template slot-scope="scope">
          <div>{{ scope.row.phone ? formatTel(scope.row.phone) : ''}}</div>
        </template>
      </el-table-column>

      <el-table-column label="证件类型" width="90">
        <template slot-scope="scope">
          <div v-if="scope.row.cardType == 1">身份证</div>
          <div v-else>其他</div>
        </template>
      </el-table-column>
      <el-table-column label="证件号">
        <template slot-scope="scope">
          <div>{{ scope.row.cardNum ? concealText(scope.row.cardNum) : ''}}</div>
        </template>
      </el-table-column>
      <!-- 用户类型暂时没有 -->
      <!-- <el-table-column label="用户类型" prop="categoryName" /> -->
      <el-table-column
        label="状态"
        width="90"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.status == 0 ? '启用' : '禁用'}}</div>
        </template>
      </el-table-column>
      <el-table-column label="申请应用" prop="applicationName" />
      <el-table-column label="申请时间" prop="createTime" width="180" />
      <el-table-column
        label="操作"
        width="90"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.status == 0"
            @click="disableEnabled(scope.row, 1)"
            >禁用</el-button
          >

          <el-button
            size="mini"
            type="text"
            v-if="scope.row.status == 1"
            @click="disableEnabled(scope.row, 0)"
            >启用</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="searchData.pageNum"
      :limit.sync="searchData.pageSize"
      @pagination="getList"
    />
    <el-dialog
      title="提示"
      :visible.sync="isHint"
      :show-close="true"
      width="354px"
      top="0"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div class="deletHint">{{ hintText }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isHint = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="updateUser"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="用户信息"
      :visible.sync="isUser"
      :show-close="false"
      width="300px"
      top="0"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div class="userContent">
        <div>
          <span>用户名</span>
          <span style="font-size:13px">{{userName}}</span>
          <el-button @click="lookInfo('用户名')" style="padding:0px" size="mini" type="text" v-if="lookName">查看</el-button>
        </div>
        <div>
          <span>证件号</span>
          <span style="font-size:13px">{{userIdNum}}</span>
          <el-button @click="lookInfo('证件号')" style="padding:0px" size="mini"  type="text" v-if="lookIdNum">查看</el-button>
        </div>
        <div>
          <span>手机号</span>
          <span style="font-size:13px">{{userPhone}}</span>
          <el-button @click="lookInfo('手机号')" style="padding:0px" size="mini" type="text" v-if="lookPhone">查看</el-button>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancelLook">取 消</el-button>
        <!-- <el-button size="mini" type="primary" @click="updateUser"
          >确 定</el-button
        > -->
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Title from "@/components/ShareTitle";
import { allAppList } from "@/api/system/application_management";
import {
  queryUserList,
  updateUser,
} from "@/api/codeRunning/applicationCodeUserManagement";
import formatTel from "../utils/formatTel";
export default {
  name: "applicationCodeUserManagement",
  components: { Title },
  data() {
    return {
      newObj:null,
      isUser:false,
      lookName:true,
      lookIdNum:true,
      lookPhone:true,
      userName:'',
      userIdNum:'',
      userPhone:'',
      hintText: "",
      isHint: false,
      appList: [],
      userList: [],
      // 查询参数
      searchData: {
        pageNum: 1,
        pageSize: 10,
        deleteFlag: "",
        applicationName: "",
        userName: "",
      },
      form: {},
      title: "",
      open: false,
      total: 0,
      // 表单校验
      rules: {
        categoryName: [
          { required: true, message: "分类名称不能为空", trigger: "blur" },
        ],
        orderNum: [
          { required: true, message: "排序号不能为空", trigger: "blur" },
        ],
      },
      statusOptions: [
        {
          value: 0,
          label: "启用",
        },
        {
          value: 1,
          label: "停用",
        },
      ],
      loading: false,
    };
  },
  created() {},
  mounted() {
    this.getAppList();
    this.getList();
  },
  methods: {
    // 弹出用户详情
    userInfo(row) {
      this.isUser = true;
      this.newObj = JSON.parse(JSON.stringify(row));
      this.userName = this.formatName(row.username)
      this.userIdNum = this.concealText(row.cardNum)
      this.userPhone = this.formatTel(row.phone)
    },
    // 显示用户数据(弹框的)
    lookInfo(type){
      if(type === '用户名'){
        this.lookName = false
        this.userName = this.newObj.username
      }else if(type === '证件号'){
        this.lookIdNum = false
        this.userIdNum = this.newObj.cardNum
      }else if(type === '手机号'){
        this.lookPhone = false
        this.userPhone = this.newObj.phone
      }
    },
    // 查看用户信息的弹框的确定
    cancelLook(){
      this.lookIdNum = true
      this.lookName = true
      this.lookPhone = true
      this.isUser = false
    },
    // 查询申码用户列表
    getList() {
      this.loading = true;
      var searchData = JSON.parse(JSON.stringify(this.searchData));
      if (searchData.applicationName !== "") {
        this.appList.forEach((item) => {
          if (searchData.applicationName === item.id) {
            searchData.applicationName = item.applicationName;
          }
        });
      }
      queryUserList(searchData).then((response) => {
        this.userList = response.data.list;
        // console.log(this.userList, "申码用户");
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 查询所有应用
    getAppList() {
      allAppList().then((response) => {
        this.appList = response.data;
        var obj = {
          id: "",
          applicationName: "全部",
        };
        this.appList.unshift(obj);
        this.getList();
      });
    },
    // 禁用启用
    disableEnabled(row, value) {
      this.form = JSON.parse(JSON.stringify(row));
      this.form.status = value;
      delete this.form.createTime;
      delete this.form.updateTime;
      console.log(this.form, "this.form");
      if (value === 0) {
        this.hintText = "你确认要更新用户状态？";
      } else {
        this.hintText = "你确认要更新用户状态？";
      }
      this.isHint = true;
    },
    // 修改用户
    updateUser() {
      //  1 禁用  0 启用(未禁用)
      updateUser({
        userId: this.form.userId,
        status: this.form.status,
      }).then((res) => {
        this.getList();
        this.isHint = false;
      });
    },
    // 格式化手机号
    formatTel(tel) {
      return formatTel(tel);
    },
    // 隐藏数据 (此处是格式化身份证号)
    concealText(value) {
      //   var before = tel.substr(0, 4);   // 截取0下标开始的四位
      var after = value.substr(value.length - 2, 2); // 截取 下标倒数第二位开始的2位
      return `**************${after}`;
    },
    // 姓名格式化
    formatName(str) {
      if (str) {
        return new Array(str.length).join("*") + str.substr(str.length-1, 1);
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.searchData.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      this.searchData = {
        deleteFlag: "",
        applicationName: "",
        userName: "",
        pageSize:10
      };
      this.handleQuery();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        deleteFlag: "",
        applicationName: "",
        userName: "",
      };
      // this.resetForm("form");
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.form = JSON.parse(JSON.stringify(row));
      this.open = true;
      this.title = "修改码类型";
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  padding-top: 0px;
}
.el-form--inline{
  margin-top: 20px;
}
.userContent{
  div{
     margin-bottom: 10px;
     &:last-of-type{
       margin-bottom: 0px;
     }
    span{
       margin-right: 20px;
    }
  }
}
.deletHint{
  text-align: center;
}
</style>